﻿window.onload = function () {
  var paper = Raphael('holder');

  //var curve = paper.ellipse(100, 100, 1, 1).attr({"stroke-width": 0, fill: Color.red});

  var text =
    "Betty Botter bought some butter but, she said, the butter's bitter. If I put it in my batter, it will make my batter bitter. But a bit of better butter will make my batter better. So, she bought a bit of butter, better than her bitter butter, and she put it in her batter, and the batter was not bitter. It was better Betty Botter bought a bit better butter.";
  var font = { font: '11px Arial', 'font-style': 'italic', opacity: 1, fill: LABEL_COLOR, stroke: LABEL_COLOR, 'stroke-width': 0.3 };
  var font = { font: '11px Arial', opacity: 1, fill: LABEL_COLOR };
  var boxWidth = 100;

  var AttributedStringIterator = function (text) {
    //this.text = this.rtrim(this.ltrim(text));
    text = text.replace(/(\s)+/, ' ');
    this.text = this.rtrim(text);
    /*
				if (beginIndex < 0 || beginIndex > endIndex || endIndex > length()) {
					throw new IllegalArgumentException("Invalid substring range");
				}
				*/
    this.beginIndex = 0;
    this.endIndex = this.text.length;
    this.currentIndex = this.beginIndex;

    //console.group("[AttributedStringIterator]");
    var i = 0;
    var string = this.text;
    var fullPos = 0;

    //console.log("string: \"" + string + "\", length: " + string.length);
    this.startWordOffsets = [];
    this.startWordOffsets.push(fullPos);

    // TODO: remove i 1000
    while (i < 1000) {
      var pos = string.search(/[ \t\n\f-\.\,]/);
      if (pos == -1) break;

      // whitespace start
      fullPos += pos;
      string = string.substr(pos);
      ////console.log("fullPos: " + fullPos + ", pos: " + pos +  ", string: ", string);

      // remove whitespaces
      var pos = string.search(/[^ \t\n\f-\.\,]/);
      if (pos == -1) break;

      // whitespace end
      fullPos += pos;
      string = string.substr(pos);

      ////console.log("fullPos: " + fullPos);
      this.startWordOffsets.push(fullPos);

      i++;
    }
    //console.log("startWordOffsets: ", this.startWordOffsets);
    //console.groupEnd();
  };
  AttributedStringIterator.prototype = {
    getEndIndex: function (pos) {
      if (typeof pos == 'undefined') return this.endIndex;

      var string = this.text.substr(pos, this.endIndex - pos);

      var posEndOfLine = string.search(/[\n]/);
      if (posEndOfLine == -1) return this.endIndex;
      else return pos + posEndOfLine;
    },
    getBeginIndex: function () {
      return this.beginIndex;
    },
    isWhitespace: function (pos) {
      var str = this.text[pos];
      var whitespaceChars = ' \t\n\f';

      return whitespaceChars.indexOf(str) != -1;
    },
    isNewLine: function (pos) {
      var str = this.text[pos];
      var whitespaceChars = '\n';

      return whitespaceChars.indexOf(str) != -1;
    },
    preceding: function (pos) {
      //console.group("[AttributedStringIterator.preceding]");
      for (var i in this.startWordOffsets) {
        var startWordOffset = this.startWordOffsets[i];
        if (pos < startWordOffset && i > 0) {
          //console.log("startWordOffset: " + this.startWordOffsets[i-1]);
          //console.groupEnd();
          return this.startWordOffsets[i - 1];
        }
      }
      //console.log("pos: " + pos);
      //console.groupEnd();
      return this.startWordOffsets[i];
    },
    following: function (pos) {
      //console.group("[AttributedStringIterator.following]");
      for (var i in this.startWordOffsets) {
        var startWordOffset = this.startWordOffsets[i];
        if (pos < startWordOffset && i > 0) {
          //console.log("startWordOffset: " + this.startWordOffsets[i]);
          //console.groupEnd();
          return this.startWordOffsets[i];
        }
      }
      //console.log("pos: " + pos);
      //console.groupEnd();
      return this.startWordOffsets[i];
    },
    ltrim: function (str) {
      var patt2 = /^\s+/g;
      return str.replace(patt2, '');
    },
    rtrim: function (str) {
      var patt2 = /\s+$/g;
      return str.replace(patt2, '');
    },
    getLayout: function (start, limit) {
      return this.text.substr(start, limit - start);
    },
    getCharAtPos: function (pos) {
      return this.text[pos];
    },
  };

  /*
			var TextMeasurer = function(paper, text, fontAttrs){
				this.text = text;
				this.paper = paper;
				this.fontAttrs = fontAttrs;
				
				this.fStart = this.text.getBeginIndex();

			};
			TextMeasurer.prototype = {
				getLineBreakIndex: function(start, maxAdvance){
					var localStart = start - this.fStart;
				},
				getLayout: function(){
				}
			}
			*/

  var LineBreakMeasurer = function (paper, text, fontAttrs) {
    this.paper = paper;
    this.text = new AttributedStringIterator(text);
    this.fontAttrs = fontAttrs;

    if (this.text.getEndIndex() - this.text.getBeginIndex() < 1) {
      throw { message: 'Text must contain at least one character.', code: 'IllegalArgumentException' };
    }

    //this.measurer = new TextMeasurer(paper, this.text, this.fontAttrs);
    this.limit = this.text.getEndIndex();
    this.pos = this.start = this.text.getBeginIndex();

    this.rafaelTextObject = this.paper.text(100, 100, this.text.text).attr(fontAttrs).attr('text-anchor', 'start');
    this.svgTextObject = this.rafaelTextObject[0];
  };
  LineBreakMeasurer.prototype = {
    nextOffset: function (wrappingWidth, offsetLimit, requireNextWord) {
      //console.group("[nextOffset]");
      var nextOffset = this.pos;
      if (this.pos < this.limit) {
        if (offsetLimit <= this.pos) {
          throw { message: 'offsetLimit must be after current position', code: 'IllegalArgumentException' };
        }

        var charAtMaxAdvance = this.getLineBreakIndex(this.pos, wrappingWidth);
        //charAtMaxAdvance --;
        //console.log("charAtMaxAdvance:", charAtMaxAdvance, ", [" + this.text.getCharAtPos(charAtMaxAdvance) + "]");

        if (charAtMaxAdvance == this.limit) {
          nextOffset = this.limit;
          //console.log("charAtMaxAdvance == this.limit");
        } else if (this.text.isNewLine(charAtMaxAdvance)) {
          console.log('isNewLine');
          nextOffset = charAtMaxAdvance + 1;
        } else if (this.text.isWhitespace(charAtMaxAdvance)) {
          // TODO: find next noSpaceChar
          //return nextOffset;
          nextOffset = this.text.following(charAtMaxAdvance);
        } else {
          // Break is in a word;  back up to previous break.
          /*
							var testPos = charAtMaxAdvance + 1;
							if (testPos == this.limit) {
								console.error("hbz...");
							} else {
								nextOffset = this.text.preceding(charAtMaxAdvance);
							}
							*/
          nextOffset = this.text.preceding(charAtMaxAdvance);

          if (nextOffset <= this.pos) {
            nextOffset = Math.max(this.pos + 1, charAtMaxAdvance);
          }
        }
      }
      if (nextOffset > offsetLimit) {
        nextOffset = offsetLimit;
      }
      //console.log("nextOffset: " + nextOffset);
      //console.groupEnd();
      return nextOffset;
    },
    nextLayout: function (wrappingWidth) {
      //console.groupCollapsed("[nextLayout]");
      if (this.pos < this.limit) {
        var requireNextWord = false;
        var layoutLimit = this.nextOffset(wrappingWidth, this.limit, requireNextWord);
        //console.log("layoutLimit:", layoutLimit);
        if (layoutLimit == this.pos) {
          //console.groupEnd();
          return null;
        }
        var result = this.text.getLayout(this.pos, layoutLimit);
        //console.log("layout: \"" + result + "\"");

        // remove end of line

        //var posEndOfLine = this.text.getEndIndex(this.pos);
        //if (posEndOfLine < result.length)
        //	result = result.substr(0, posEndOfLine);

        this.pos = layoutLimit;

        //console.groupEnd();
        return result;
      } else {
        //console.groupEnd();
        return null;
      }
    },
    getLineBreakIndex: function (pos, wrappingWidth) {
      //console.group("[getLineBreakIndex]");
      //console.log("pos:"+pos + ", text: \""+ this.text.text.replace(/\n/g, "_").substr(pos, 1) + "\"");

      var bb = this.rafaelTextObject.getBBox();

      var charNum = -1;
      try {
        var svgPoint = this.svgTextObject.getStartPositionOfChar(pos);
        //var dot = this.paper.ellipse(svgPoint.x, svgPoint.y, 1, 1).attr({"stroke-width": 0, fill: Color.blue});
        svgPoint.x = svgPoint.x + wrappingWidth;
        //svgPoint.y = bb.y;
        //console.log("svgPoint:", svgPoint);

        //var dot = this.paper.ellipse(svgPoint.x, svgPoint.y, 1, 1).attr({"stroke-width": 0, fill: Color.red});

        charNum = this.svgTextObject.getCharNumAtPosition(svgPoint);
      } catch (e) {
        console.warn('getStartPositionOfChar error, pos:' + pos);
        /*
						var testPos = pos + 1;
						if (testPos < this.limit) {
							return testPos
						}
						*/
      }
      //console.log("charNum:", charNum);
      if (charNum == -1) {
        //console.groupEnd();
        return this.text.getEndIndex(pos);
      } else {
        // When case there is new line between pos and charnum then use this new line
        var newLineIndex = this.text.getEndIndex(pos);
        if (newLineIndex < charNum) {
          console.log(
            'newLineIndex <= charNum, newLineIndex:' + newLineIndex + ', charNum:' + charNum,
            '"' + this.text.text.substr(newLineIndex + 1).replace(/\n/g, '↵') + '"'
          );
          //console.groupEnd();

          return newLineIndex;
        }

        //var charAtMaxAdvance  = this.text.text.substring(charNum, charNum + 1);
        var charAtMaxAdvance = this.text.getCharAtPos(charNum);
        //console.log("!!charAtMaxAdvance: " + charAtMaxAdvance);
        //console.groupEnd();
        return charNum;
      }
    },
    getPosition: function () {
      return this.pos;
    },
  };

  // ******
  function drawMultilineText(text, x, y, boxWidth, boxHeight, options) {
    var TEXT_PADDING = 3;
    var width = boxWidth - 2 * TEXT_PADDING;
    if (boxHeight) var height = boxHeight - 2 * TEXT_PADDING;

    var layouts = [];

    var measurer = new LineBreakMeasurer(paper, text, font);
    var lineHeight = measurer.rafaelTextObject.getBBox().height;
    console.log('text: ', text.replace(/\n/g, '↵'));

    if (height) {
      var availableLinesCount = parseInt(height / lineHeight);
      console.log('availableLinesCount: ' + availableLinesCount);
    }

    var i = 1;
    while (measurer.getPosition() < measurer.text.getEndIndex()) {
      var layout = measurer.nextLayout(width);
      //console.log("LAYOUT: " + layout + ", getPosition: " + measurer.getPosition());

      if (layout != null) {
        if (!availableLinesCount || i < availableLinesCount) {
          layouts.push(layout);
        } else {
          layouts.push(fitTextToWidth(layout + '...', boxWidth));
          break;
        }
      }
      i++;
    }
    console.log(layouts);

    measurer.rafaelTextObject.attr({ text: layouts.join('\n') });
    //measurer.rafaelTextObject.attr({"text-anchor": "end"});
    //measurer.rafaelTextObject.attr({"text-anchor": "middle"});
    if (options) measurer.rafaelTextObject.attr({ 'text-anchor': options['text-anchor'] });

    var bb = measurer.rafaelTextObject.getBBox();
    //measurer.rafaelTextObject.attr({"x": x + boxWidth/2});
    if (options['vertical-align'] == 'top') measurer.rafaelTextObject.attr({ y: y + bb.height / 2 + TEXT_PADDING });
    else measurer.rafaelTextObject.attr({ y: y + height / 2 });
    //var bb = measurer.rafaelTextObject.getBBox();

    if (measurer.rafaelTextObject.attr('text-anchor') == 'middle') measurer.rafaelTextObject.attr('x', x + boxWidth / 2 + TEXT_PADDING / 2);
    else if (measurer.rafaelTextObject.attr('text-anchor') == 'end') measurer.rafaelTextObject.attr('x', x + boxWidth + TEXT_PADDING / 2);
    else measurer.rafaelTextObject.attr('x', x + boxWidth / 2 - bb.width / 2 + TEXT_PADDING / 2);

    var boxStyle = { stroke: Color.LightSteelBlue2, 'stroke-width': 1.0, 'stroke-dasharray': '- ' };
    /*
				var box = paper.rect(x+.0 + boxWidth/2 - bb.width/2+ TEXT_PADDING/2, y + .5 + boxHeight/2 - bb.height/2, width, height).attr(boxStyle);
				box.attr("height", bb.height);
				*/
    //var box = paper.rect(bb.x - .5 + bb.width/2 + TEXT_PADDING, bb.y + bb.height/2, bb.width, bb.height).attr(boxStyle);

    var textAreaCX = x + boxWidth / 2;
    var textAreaCY = y + height / 2;
    var dotLeftTop = paper.ellipse(x, y, 3, 3).attr({ 'stroke-width': 0, fill: Color.LightSteelBlue, stroke: 'none' });
    var dotCenter = paper.ellipse(textAreaCX, textAreaCY, 3, 3).attr({ fill: Color.LightSteelBlue2, stroke: 'none' });

    /*
				// real bbox
				var bb = measurer.rafaelTextObject.getBBox();
				var rect = paper.rect(bb.x+.5, bb.y + .5, bb.width, bb.height).attr({"stroke-width": 1});
				*/
    var boxStyle = { stroke: Color.LightSteelBlue2, 'stroke-width': 1.0, 'stroke-dasharray': '- ' };
    var rect = paper.rect(x + 0.5, y + 0.5, boxWidth, boxHeight).attr(boxStyle);
  }

  /*
			for (var i=0; i<1; i++) {
				var t = text;
				//var t = "Высококвалифицирова";
				
				var text = paper.text(300, 100, t).attr(font).attr("text-anchor", "start");
				var bbText = text.getBBox();
				paper.rect(300+.5, 100 + .5, bbText.width, bbText.height).attr({"stroke-width": 1});
				console.log("t: ", t.replace(/\n/g, "↵"));
				
				while (measurer.getPosition() < measurer.text.getEndIndex()) {
					var layout = measurer.nextLayout(width);
					//console.log("LAYOUT: " + layout + ", getPosition: " + measurer.getPosition());
					if (layout != null)
						layouts.push(layout);
				};
				
				measurer.rafaelTextObject.attr("text", layouts.join("\n"));
				var bb = measurer.rafaelTextObject.getBBox();
				var rect = paper.rect(bb.x+.5, bb.y + .5, bb.width, bb.height).attr({"stroke-width": 1});
				
				lay.push(layouts);
				console.log(layouts);
			}
			*/

  var fitTextToWidth = function (original, width) {
    var text = original;

    // TODO: move attr on parameters
    var attr = { font: '11px Arial', opacity: 0 };

    // remove length for "..."
    var dots = paper.text(0, 0, '...').attr(attr).hide();
    var dotsBB = dots.getBBox();

    var maxWidth = width - dotsBB.width;

    var textElement = paper.text(0, 0, text).attr(attr).hide();
    var bb = textElement.getBBox();

    // it's a little bit incorrect with "..."
    while (bb.width > maxWidth && text.length > 0) {
      text = text.substring(0, text.length - 1);
      textElement.attr({ text: text });
      bb = textElement.getBBox();
    }

    // remove element from paper
    textElement.remove();

    if (text != original) {
      text = text + '...';
    }

    return text;
  };

  var x = 100,
    y = 90,
    height = 20;
  var options = { 'text-anchor': 'middle', boxHeight: 150, 'vertical-align': 'top' };
  var options = { boxHeight: 150, 'vertical-align': 'top' };
  drawMultilineText(text, x, y, 150, 100, options);
};
